<template>
  <div style="margin-bottom: 4px">
    <n-switch v-model:value="data.pb" @update:value="set.pbhand">
      <template #checked> 常用角色 </template>
      <template #unchecked> 所有角色 </template>
    </n-switch>
  </div>
  <div style="display: flex; flex-direction: column; gap: 12px; align-items: center">
    <div
      style="
        background-color: #5c626f;
        width: 300px;
        padding: 5px;
        padding-right: 10px;
        padding-left: 10px;
        border-radius: 5px;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
      "
    >
      <n-flex justify="center">
        <template v-for="(item, key) in odata">
          <div class="roleavabox">
            <div class="zkname">{{ listname[key] }}</div>
            <template v-if="item.i == null">
              <img
                @click="set.removerole(null)"
                class="roleava"
                src="https://gtimg.ww2.ren/?file=ava/dummy_girl.png"
              />
            </template>
            <template v-else>
              <img
                @click="set.removerole(key)"
                class="roleava"
                :src="cfg.function.ava(item.i, 100)"
              />
            </template>
            <n-dropdown
              v-if="props.showwepon == true"
              size="small"
              trigger="hover"
              :options="set.zwop"
              @select="(option) => set.handzw({ option, key })"
            >
              <div class="zkweapon">
                {{ item.w }}
              </div>
            </n-dropdown>
            <n-dropdown
              v-if="props.showsp == true"
              trigger="click"
              size="small"
              :options="set.spop"
              @select="(option) => set.handsp({ option, key })"
            >
              <div class="zkweapon" style="margin-top: 2px">
                {{ item.s ?? "空饰品" }}
              </div>
            </n-dropdown>
            <n-dropdown
              v-if="props.showmk == true"
              trigger="click"
              size="small"
              :options="set.mkop"
              @select="(option) => set.handmk({ option, key })"
            >
              <div class="zkweapon" style="margin-top: 2px">
                {{ item.c ?? "空魔卡" }}
              </div>
            </n-dropdown>
            <n-dropdown
              v-if="props.showyw == true"
              trigger="click"
              size="small"
              :options="set.ywop"
              @select="(option) => set.handyw({ option, key })"
            >
              <div class="zkweapon" style="margin-top: 2px">
                {{ item.y ?? "遗物属性" }}
              </div>
            </n-dropdown>
            <n-dropdown
              v-if="props.showywlx == true"
              trigger="click"
              size="small"
              :options="set.ywlx"
              @select="(option) => set.handywlx({ option, key })"
            >
              <div class="zkweapon" style="margin-top: 2px">
                {{ item.yl ?? "遗物类型" }}
              </div>
            </n-dropdown>
          </div>
        </template>
      </n-flex>
    </div>

    <div
      style="
        width: 300px;
        display: grid;
        grid-template-columns: repeat(6, minmax(0px, 1fr));
        gap: 8px;
      "
      class="_pcmw _sstag_box mauto"
    >
      <template v-for="item in set.ss">
        <div
          style="
            outline: unset !important;
            background-color: #47485c;
            border: solid 1px #52618b;
            border-radius: 2px;
          "
          class="nosl m_tagbox"
          :class="{ m_tagbox_active: data.slss?.includes(item) }"
          @click="data.slss = item"
        >
          <span>{{ item }}</span>
        </div>
      </template>
    </div>
    <div
      class="autoavasp"
      style="
        background-color: #5c626f;
        padding: 5px;

        padding-right: 10px;
        padding-left: 10px;
        border-radius: 5px;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
      "
      v-if="data.slss != null"
    >
      <template v-for="item in data.role">
        <template v-if="item.shu == data.slss && parseInt(item.star) >= 2">
          <div @click="set.addrole(item)">
            <div class="ycname">{{ item.bname[0] }}</div>
            <img class="ycimg" :src="cfg.function.ava(item.icon, 100)" />
          </div>
        </template>
      </template>
    </div>
  </div>
</template>
<style scoped>
.ycname {
  background-color: rgb(0 0 0 / 52%);
  text-align: center;
  font-size: 11px;
}

.autoavasp img {
  width: 45px;
  height: 45px;
  border-radius: 8px;
  background: var(--ava2-bg);
  padding: var(--ava2-pd);
  border: var(--ava2-border);
}

.autoavasp {
  background-color: var(--bg5) !important;
  gap: 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.team_sstag2 {
  --n-color: rgb(42 43 44 / 80%) !important;
  --n-border: var(--nbox4-border) !important;
  --n-text-color: var(--tag-tc) !important;
  display: flex;
  justify-content: center;
  text-shadow: 0 0 2px #000;
  outline: solid 0px #40444f;
  border: solid 0px #424242;
  border-radius: 50px;
}

.roleavabox {
  margin-top: 5px;
  border-radius: 5px;
  background: var(--ava2-bg);
  position: relative;
  border: var(--ava2-border);
}

.zkweapon {
  background-color: #47485c;
  text-align: center;
  font-size: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin: 3px;
  border: solid 1px #52618b;
  margin-top: -2px;
  border-radius: 2px;
}

.roleava {
  width: 55px;
  height: 55px;
}

.zkname {
  position: absolute;
  background-color: rgb(0 0 0 / 50%);
  padding-left: 5px;
  padding-right: 5px;
  left: -10px;
  font-size: 12px;
  top: -8px;
  border-radius: 999px;
}
</style>

<script>
import { cfg } from "@/cfg/cfg.js";
import { getrole } from "@/cfg/function.js";

export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
    listname: {
      type: Array,
      required: false,
    },
    maxlimit: {
      type: Number,
      required: false,
    },
    ban: {
      type: Array,
      required: false,
    },
    showwepon: {
      type: Boolean,
      required: false,
    },
    showsp: {
      type: Boolean,
      required: false,
    },
    showmk: {
      type: Boolean,
      required: false,
    },
    showyw: {
      type: Boolean,
      required: false,
    },
    showywlx: {
      type: Boolean,
      required: false,
    },
  },
  setup(props) {
    const set = {
      handzw: (obj) => {
        const key = obj.key;
        odata[key].w = obj.option;
      },
      handsp: (obj) => {
        const key = obj.key;
        odata[key].s = obj.option;
      },
      handmk: (obj) => {
        const key = obj.key;
        odata[key].c = obj.option;
      },
      handyw: (obj) => {
        const key = obj.key;
        odata[key].y = obj.option;
      },
      handywlx: (obj) => {
        const key = obj.key;
        odata[key].yl = obj.option;
      },
      addrole: (item) => {
        let add = false;
        for (let i = 0; i < odata.length; i++) {
          const dt = odata[i];
          if (dt.i == item.icon) {
            cfg.alert3({
              message: `无法添加角色${item.name}，请点击下方角色大图标移除后添加`,
              closeOnClickOverlay: true,
            });
            return;
          }
          if (dt.i == null) {
            add = true;
            odata[i].i = item.icon;
            return;
          }
        }
        if (add == false) {
          cfg.alert3({
            message: `队伍角色已满，请点击角色图标移除角色。`,
            closeOnClickOverlay: true,
          });
          return;
        }
      },
      //选择角色移除
      removerole: (key) => {
        if (key == null) {
          cfg.msg.info("点击下方属性按钮添加角色");
        } else {
          odata[key].i = null;
        }
        return true;
      },
      ss: ["火", "水", "土", "光", "暗", "虚"],
      spop: [
        {
          label: "牛头",
          key: "牛头",
        },
        {
          label: "魔镜",
          key: "魔镜",
        },
        {
          label: "手镯",
          key: "手镯",
        },
      ],
      mkop: [
        {
          label: "技技",
          key: "技技",
        },
        {
          label: "攻攻",
          key: "攻攻",
        },
        {
          label: "暴暴",
          key: "暴暴",
        },
        {
          label: "暴攻",
          key: "暴攻",
        },
        {
          label: "技暴",
          key: "技暴",
        },
        {
          label: "攻属",
          key: "攻属",
        },
      ],
      zwop: [
        {
          label: "本专",
          key: "本专",
        },
        {
          label: "二专",
          key: "二专",
        },
        {
          label: "火武器",
          key: "火武器",
        },
        {
          label: "水武器",
          key: "水武器",
        },
        {
          label: "土武器",
          key: "土武器",
        },
        {
          label: "光武器",
          key: "光武器",
        },
        {
          label: "暗武器",
          key: "暗武器",
        },
        {
          label: "虚武器",
          key: "虚武器",
        },
      ],
      ywop: [
        {
          label: "技技技",
          key: "技技技",
        },
        {
          label: "暴暴暴",
          key: "暴暴暴",
        },
        {
          label: "攻攻攻",
          key: "攻攻攻",
        },
        {
          label: "暴攻攻",
          key: "暴攻攻",
        },
        {
          label: "暴暴攻",
          key: "暴暴攻",
        },
        {
          label: "技技暴",
          key: "技技暴",
        },
      ],
      ywlx: [
        {
          label: "杯子",
          key: "杯子",
        },
        {
          label: "魔法书",
          key: "魔法书",
        },
      ],
      pbhand: (tf) => {
        if (tf == true) {
          set.chi(true);
        } else {
          set.chi(false);
        }
      },
      chi: (tf) => {
        data.role = cfg.role.slice();
        if (tf == true) {
          bantype.forEach((banItem) => {
            data.role.forEach((item, index) => {
              //item.bantag数组中包含banItem字符串
              if (item.bantag?.includes(banItem)) {
                delete data.role[index];
              }
            });
            //删除后重新排序
            data.role = data.role.filter((item) => item != null);
          });
        }
        return true;
      },
    };
    const bantype = props.ban ?? [];
    const odata = props.data ?? [];
    const maxlimit = props.maxlimit;
    const listname = props.listname ?? ["主控", "AI", "AI", "AI"];
    if (maxlimit >= 1) {
      //如果有最大限制
      if (odata.length < maxlimit) {
        const flth = maxlimit - odata.length;
        //如果数量小于最大限制，则push空obj
        for (let i = 0; i < flth; i++) {
          odata.push({
            w: "本专",
          });
        }
      }
    }
    let data = reactive({
      role: [],
      pb: true,
    });

    onMounted(async () => {
      await getrole();
      set.chi(data.pb);
    });
    return { props, bantype, listname, cfg, odata, data, set };
  },
};
</script>
